<template>
  <div class="macaroni">
    <!--<x-header title="通心粉" :left-options="{backText:''}"></x-header>-->
    <div class="macaroniHeader">
    	<div class="goBack" @click="goBack">    		
    		<img src="../../assets/image/macaroni/goback2.png" alt="" />
    	</div>
    	<div class="hTitle" @click.stop="$router.go(-1)">
    		<p>通心粉</p>
    	</div>
    	<div class="macaroniImgs">
    		<div class="userImg">
    			<img :src="userHeadImg" alt="" />
    		</div>
    		<div class="macaroniImg">
    			<img v-if="allData.MEMBERGRADE==1" src="../../assets/image/macaroni/lvDiamond.png" alt="" />
    			<img v-else-if="allData.MEMBERGRADE==2" src="../../assets/image/macaroni/lvGold.png" alt="" />
    			<img v-else-if="allData.MEMBERGRADE==3" src="../../assets/image/macaroni/lvSilver.png" alt="" />
    			<img v-else-if="allData.MEMBERGRADE==4" src="../../assets/image/macaroni/lvCopper.png" alt="" />
    			<img v-else-if="allData.MEMBERGRADE==5" src="../../assets/image/macaroni/lvRegister.png" alt="" />
    			<img v-else src="../../assets/image/macaroni/lvRegister.png" alt="" />
    		</div>
    	</div>
    	<div class="macaroniUser">
    		<div class="userPhone">
    			<p>{{userPhone}}</p>
    		</div>
    		<div class="macaroniNum">
				<p>通币:{{allData.INTEGRAL}}个</p>
			</div>
			<div class="levelIcon">
				<range 
					v-model="allData.EXPERIENCE_VALUE"
					:min="rangeMin" 
					:max="rangeMax" 					
					:range-bar-height="12" 					
				>
				</range>				
				<p>{{allData.EXPERIENCE_VALUE}}/{{rangeMax}}</p>
			</div>
			<div class="levelText">
				<p>
					还差{{differValue}}经验升级到
					<span v-if="allData.MEMBERGRADE==5">铜牌会员</span>
					<span v-else-if="allData.MEMBERGRADE==4">银牌会员</span>
					<span v-else-if="allData.MEMBERGRADE==3">金牌会员</span>
					<span v-else-if="allData.MEMBERGRADE==2 || allData.MEMBERGRADE==1">钻石会员</span>
					<span v-else>铜牌会员</span>
				</p>
			</div>			    	
    	</div>
    </div>
    <div class="getMacaroni">
    	<div class="tongIcon">
    		<img src="../../assets/image/macaroni/tongIcon.png" alt="" />
    	</div>
    	<div class="getMacaroniText">
    		<div class="getEveryday" @click.stop="getMacaroni">
    			<p>天天领通币</p>
    		</div>
    		<div class="macaroniWaitYou" @click.stop="getMacaroni">
    			<p>通心粉夺宝大趴等你来</p>
    		</div>
    	</div>
    	<div class="goToMacaroni" @click.stop="getMacaroni">
    		<p>去领通币</p>
    	</div>
    	<div class="rightArrow" @click.stop="getMacaroni">
    		<img src="../../assets/image/macaroni/rightArrow.png" alt="" />
    	</div>
    </div>
    <div class="macaroniBlank"></div>
    <div class="memberExplain" @click="goMacaroniExplain">
    	<img src="../../assets/image/macaroni/instruction.png" alt="" />
    </div>
    <div class="mBlank"></div>
    <div class="autoImg" >
    	<swiper :show-dots="false" :auto='true' v-model='currentIndex'>
        <swiper-item class="swiper-demo-img" v-for='(item,index) in actData' :key='index'>
           <img :src="item.MEDIA_PATH" alt="" />
        </swiper-item>
      </swiper>
      <span class="index">{{(currentIndex+1)+'/'+(actData.length)}}</span>
    </div>
    <div class="mBlank"></div>
   	<!--<div class="memberPrivilege">
   		 <img src="../../assets/image/macaroni/member.png" alt="" />
   	</div>-->
   	
   	<!--<div class="carproductList">
   		<div class="carproductImgInfo" v-for="items in memberData.SERVICEDETAIL">   			
   			<img :src="imgUrl+items.COVER_IMG" alt="" />
   			<div class="carproductLabel">
   				<p>{{items.REMARK}}</p>
   			</div>
   			<div class="carproductName">
   				<p>{{items.SERV_SUBJECT}}</p>
   			</div>
   			<div class="carproductBottom">
   				<div class="carproductPrivilege">
   					<p>铜牌特享:</p>
   				</div>
	   			<div class="carproductPrice">
	   				<p><span>¥</span>{{items.PRICE}}</p>	   				
	   			</div>
	   			<div class="carproductOldPrice">
	   				<p><span>¥</span>{{items.ORIGINAL_PRICE}}</p>
	   			</div>	
   			</div>
   			
   		</div>   		
   	</div>-->
   	<div class="carPro">
				<h1>
                <img src="../../assets/image/macaroni/member2.png" alt="" />
              </h1>
				<div class="allProduct">
					<div class="listItem productBorder" v-for='item in memberData.SERVICEDETAIL' @click="goCarp(item.SERV_ID)">
						<img :src="imgUrl+item.COVER_IMG" alt="" />
						<p>{{item.REMARK}}</p>
						<h2>{{item.SERV_SUBJECT}}</h2>
						<div class="price">
							<p><span>铜牌特享:</span> ￥{{item.PRICE}}</p>
							<!--<img src="../../assets/image/home/shopCar.png" alt="" />-->
							<p class="oPrice">￥{{item.ORIGINAL_PRICE}}</p>
						</div>
					</div>
				</div>
			</div>
  </div>
</template>
<script>
/*通心粉*/
import {XHeader,Range,Swiper, SwiperItem} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"macaroni",
  // 数据
  data(){

    return{
    	userId:'',
    	city:'',
    	userPhone:'',//手机号码
    	userHeadImg:'',//头像
    	allData:'',//通币数据
    	imgUrl:'',//会员专享商品图片Url
    	memberData:'',//会员专享    	        	
    	differValue:'',//差值,值为rangeMax-macaroniNum
    	rangeMin:0,//进度条最小值
    	rangeMax:2000,//进度条最大值，铜牌100，银牌2000，金牌10000，钻石30000
    	actData:'',//图片数据
      ranges:'',
      currentIndex:0
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    //this.userId = 137038;
    this.city = sessionStorage.getItem('city');//城市    
    //setCookie('loginkey','205818');//江政彬id			
		// setCookie('loginkey','229012');//少丽id
		// setCookie('loginkey','137038');//继定id
    //个人信息
    this.$fetchGet('/UserWeb/getUserInfo.action',{USER_ID:this.userId}).then(res=>{      				
            if(res.STATUS_CODE == 1){
            	this.userPhone = res.TEL;
            	this.userHeadImg = res.AVATAR;                
            }                                 
    },err=>console.log(err));
    //获取会员经验值、等级、通币
    this.$fetchPost('/ExperienceValueWeb/getMemberInfoByUserId',{USER_ID:this.userId}).then(res=>{
    				//console.dir(res);
            if(res.STATUS_CODE == 1){
            		if(res.MEMBERGRADE == 4){//铜牌
            			this.rangeMax = 2000;
            		}else if(res.MEMBERGRADE == 3){//银牌
            			this.rangeMax = 10000;
            		}else if(res.MEMBERGRADE == 2){//金牌
            			this.rangeMax = 30000;
            		}else if(res.MEMBERGRADE == 1){//钻石
            			this.rangeMax = 99999;
            		}else{
            			this.rangeMax = 100;//注册
            		}            	           		            	
            		this.differValue = this.rangeMax - res.EXPERIENCE_VALUE;
                this.allData = res;
            }                                 
    },err=>console.log(err));
    
    //会员专享，兑换车品
    this.$fetchGet('/MemberIntegralWeb/getExchangePro',{CATEGORY:1}).then(res=>{    		
    				//console.dir(res);
            if(res.STATUS_CODE == 1){
            		this.imgUrl = res.IMG_URL;
                this.memberData = res;
            }                                 
    },err=>console.log(err));
    //获取图片    
    this.$fetchPost('/CommonService/getHomeImages.action',{CITY:this.city}).then(res=>{
          if(res.STATUS_CODE==1){
            //console.log(res);
            this.actData = res.RESULT_DATA[0].INTEGRAL_ADVERT;            
          }
        },err=>{
          console.log(err);
        })
    
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    	//领取通币
    	getMacaroni(){
    		this.$router.push('/getMacaroni?phone='+this.userPhone);
    	},
      goBack(){
        this.$router.go(-1);
      },
    	//权益说明
    	goMacaroniExplain(){
    		//this.$router.push('/macaroniExplain');
    		location.href="http://carnt.carnettong.com:8088/CARNT/desc/member/index.html";
    	},
    	//特价车品
    	goCarp(id){
    		this.$router.push('/shopDetail/'+id);
			}
  },
  // 子组件
  components:{
    XHeader,
    Range,Swiper, SwiperItem
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.macaroni{	
	background:#fff;
  .index{
    font-size: 0.24rem;
    color: #fff;
    background: rgba(0,0,0,.5);
    position: absolute;
    padding: 0.05rem 0.15rem;
    border-radius: 0.2rem;
    right: 0.4rem;
    bottom: 0.3rem;
  }	
  	.macaroniHeader{
  		height:3.74rem;  				
  		background:url('../../assets/image/macaroni/redBottom4.png') no-repeat;
  		background-size:7.5rem 3.74rem;    				
  		display:flex;  	
  		border:none;
  		z-index:9999;	  		
  		.goBack{
        position:absolute;
        left:0.1rem;
        top:0.1rem;
        display: flex;
        padding:0.1rem 0.2rem;  
        z-index:999;			
  			img{  				
  				
  				width:0.2rem;
  				height:0.37rem;  				
  			}
  		} 		
  		.hTitle{
  			p{
  				position:absolute;
  				left:3.2rem;
  				top:0.2rem;
  				font-size:0.36rem;
  				color:#fff;
  				align-self:center;
  			}
  		}
  		.macaroniImgs{
  			width:25%;
  			height:100%;  			
  			position:relative;   			 					
  			.userImg{
  				display:flex;
	  			flex-flow:column;	
	  			position:absolute;
	  			right:-0.2rem;
	  			top:1.02rem;	
	  			background:url('../../assets/image/macaroni/headbg.png') no-repeat;
  				background-size:1.3rem 1.3rem;   	  									  			  				  		
          border:0.1rem solid rgba(255,255,255,.3);
          border-radius: 50%;
  				img{
	  				width:1.3rem;
	  				height:1.3rem;
	  				border-radius:50%;	 	  				  					  					  			  				
	  					  								
  				}	
  			}
  			.macaroniImg{
  				display:flex;
	  			flex-flow:column;	  			 	
	  			position:absolute;
	  			right:-0.30rem;
	  			top:2.14rem;		
  				img{
  					width:1.76rem;
  					height:0.48rem;  					  										
  				}
  			}
  			
  		}
  		.macaroniUser{
  			width:75%;
  			display:flex;
  			flex-flow:column;
  			position:relative;    						
  			.userPhone{
  				align-self:flex-start;  				
  				position:absolute;
  				left:0.68rem;
  				top:1.02rem;
  				p{
  					font-size:0.30rem;
  					color:#fff;
  				}
  			}
  			.macaroniNum{
  				align-self:flex-start;  				 	
  				position:absolute;
  				left:0.68rem;
  				top:1.52rem;			
  				p{
  					font-size:0.28rem;
  					color:#fff;
  				}
  			}
  			.levelIcon{
  				width:4.29rem;
  				height:0.31rem;  				
  				align-self:flex-start;  				 
  				position:absolute;
  				left:-0.4rem;  				
  				bottom:1.3rem;			  				
  				p{
  					position:absolute;
  					bottom:0.05rem;
  					left:1.8rem;
  					font-size:0.22rem;
  					color:#fff;
  					z-index:999999;
  				}  				
  			}
  			.levelText{
  				align-self:flex-start;  				
  				position:absolute;
  				left:0.68rem;
  				bottom:0.94rem;
  				p{
  					font-size:0.22rem;
  					color:#fff;
  				}
  			}
  		}  		
  	}
  	.getMacaroni{
  		width:6.9rem;
  		//height:1.06rem;
  		height:1.4rem;
  		margin:0 auto;  		
  		display:flex;  		  		
  		background:url('../../assets/image/macaroni/bag1.png') no-repeat center;
  		background-size:6.9rem 1.4rem;
  		margin-top:-0.5rem;  		
  		//box-shadow:0 0.04rem 0.2rem #e8e8e8; 
  		z-index:99999;    			
  		.tongIcon{  			
  			height:100%;
  			display:flex;
  			flex-flow:column;
  			justify-content:center;  			
  			img{
  				align-self:center;
  				width:0.44rem;
  				height:0.49rem;
  				margin-left:0.5rem;
  				margin-top:-0.3rem;  				
  			}
  		}
  		.getMacaroniText{
  			display:flex;
  			flex-flow:column;
  			align-self:center;
  			width:3.2rem;  	
  			margin-top:-0.30rem;	  				
  			.getEveryday{  				
  				p{  					
  					font-size:0.32rem;
  					color:#111;  					
  					letter-spacing:0.04rem;	
  					text-align:left;
  					text-indent:0.26rem;
  				}
  			}
  			.macaroniWaitYou{
  				p{
  					font-size:0.22rem;
  					color:#999;
  					text-align:left;
  					text-indent:0.26rem;
  				}
  			}
  		}
  		.goToMacaroni{
  			align-self:center;
  			width:1.62rem;  			  			
  			display:block;
  			margin-left:0.22rem;
  			margin-bottom:0.3rem;
  			padding-left:0.12rem;  			
  			p{
  				font-size:0.32rem;
  				color:#e60000;    				
  				letter-spacing:0.04rem;				
  			}
  		}
  		.rightArrow{  			
  			align-self:center;
  			height:100%;
  			display:flex;
  			flex-flow:column;
  			justify-content:center;  	  			
  			margin-left:0.1rem;		
  			margin-bottom:0.30rem;
  			img{  				
  				align-self:center;
  				width:0.44rem;
  				height:0.44rem;
  			}
  		}
  	}
  	.macaroniBlank{
  		margin-top:0.1rem;
  		height:0.32rem;
  		background:#fff;
  	}
  	.memberExplain{  		
  		width:7.5rem;  		
  		//background:#f8f8f8;
  		background:#fff;  		
  		img{
  			width:6.62rem; 
        margin-top: -0.7rem;   					
  		}
  	}
  	.mBlank{
  		height:0.2rem;
  		background:#f8f8f8;
  	}
  	.autoImg{
  		height:2.5rem;
  		background:#fff;
  		position:relative;
  		img{
  			width:7.1rem;
  			height:2.3rem;
        margin-top: 0.1rem;
  		}
  		p{
  			position:absolute;
  			right:0.2rem;
  			bottom:0rem;
  			width:0.66rem;
  			height:0.36rem;
  			background:#000000;  			
  			border-radius:0.2rem;
  			opacity:40%;
  			font-size:0.24rem;
  			color:#fff;
  		}
  	}
  	.memberPrivilege{
  		height:0.88rem;
  		background:#fff;
  		display:flex;
  		flex-flow:column;
  		justify-content:center;
  			img{
  				align-self:center;
  				width:1.86rem;
  				height:0.25rem;
  			}
  	}
  	.carproductList{  		
  		display:flex;
  		width:92%;
  		margin:0 auto;
  		flex-flow:row wrap;  		
  		align-items:center; 
  		.carproductImgInfo{
  			width:50%;
            height:100%;
            display:flex;
            flex-flow:column;
            align-items:center;
            justify-content:space-around;
  			background:#fff;  	   					 			  	
  			img{
  				width:3.32rem;
  				height:2.92rem;
  				border-radius:0.08rem;
  				border:1px solid #f2f2f2;
  			}	
  			.carproductLabel{
  				width:3.36rem;
  				height:0.36rem;
  				background:#dc1e33;
  				display:flex;
  				flex-flow:column;
  				justify-content:center;
  				p{
  					font-size:0.26rem;
  					color:#fff;
  					align-self:center;
  				}
  			}
  			.carproductName{
  				width:3.36rem;
  				height:0.8rem;  				
  				display:flex;
  				flex-flow:column;
  				justify-content:center;
  				margin-top:0.28rem;
  				p{  		
  					height:0.76rem;			
  					font-size:0.26rem;
  					color:#000000;
  					text-align:left;
  					font-weight:bold;
  					/*让文字只显示2行，其余用...代替start*/
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            /*让文字只显示2行，其余用...代替end*/
  				}
  			}
  			.carproductBottom{
  				width:3.36rem;
  				height:0.6rem;  				
  				display:flex;  		
  				margin-bottom:0.04rem;	    							  				  			
  				.carproductPrivilege{
  					width:37%;
  					height:100%;
  					display:flex;
	  				flex-flow:column;
	  				justify-content:center;
  					p{
  						font-size:0.26rem;
  						color:#e60000;
  						font-weight:bolder;
  						align-self:center;
  					}
  				}
  				.carproductPrice{
  					width:30%;
  					height:100%;
  					display:flex;
	  				flex-flow:column;
	  				justify-content:center;
  					p{
  						font-size:0.32rem;
  						color:#e60000;
  						font-weight:bolder;
  						align-self:center;
  						span{
  							font-size:0.26rem;
  						}
  					}
  				}
  				.carproductOldPrice{
  					width:33%;
  					height:100%;
  					display:flex;
	  				flex-flow:column;
	  				justify-content:center;
  					p{
  						font-size:0.22rem;
  						color:#989898;
  						text-decoration:line-through;
  						align-self:center;
  						span{
  							font-size:0.26rem;
  						}
  					}
  				}
  			}
  		}
  	}
  	.carPro {
				background: #fff;
				margin-bottom: 0.16rem;
				h1 {
					height: 0.8rem;
					line-height: 0.8rem;
					display: flex;
					align-items: center;
					padding-left: 0.2rem;
					justify-content:center;
					img {
						align-self: center;
						width: 2rem;
						height: 0.29rem;
					}
				}
				.allProduct {
					display: flex;
					justify-between: space-around;
					flex-wrap: wrap;
					.listItem {
						padding: 0rem 0 0.05rem 0;
						margin: 0 0.1rem 0.1rem 0.175rem;
						box-sizing: border-box;
						img {
							width: 3.5rem;
							height: 3rem;
							background: #f7f7f7;
							display: block;
						}
						h2 {
							width: 3.5rem;
							margin-top: 0.2rem;
							font-size: 0.26rem;
              height: 0.8rem;
							line-height: 0.4rem;
              padding: 0 0.2rem;
							overflow : hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
							color: #222;
						}
						p {
							font-size: 0.22rem;
							z-index: 2;
							height: 0.5rem;
							line-height: 0.5rem;
							position: relative;
							width: 3.46rem;
							margin: 0 auto;
							background: #f7f7f7;
							color: #EC2121;
						}
						.price {
							width: 3.5rem;
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							padding: 0rem 0.2rem 0.05rem 0.2rem;																								
							img {
								width: 0.4rem;
								height: 0.35rem;
								background: #fff;
							}
							p{								
								font-size: 0.25rem;
								color: #e84632;
								padding-right: 0.22rem;
								font-weight: bolder;
								background:#fff;																														
								span{
									font-weight:bolder;									
								}
							}
							.oPrice{
								width:1rem;														
								font-size:0.22rem;
  							color:#989898;
  							text-decoration:line-through;  							
							}							
						}
					}
					.listItem:nth-child(2n) {
						padding: 0rem 0rem 0.1rem 0;
						margin: 0 0.175rem 0.1rem 0;
					}
				}
			}
			/*边框一像素*/
		    .productBorder{
		      position:relative;
		    }
		    .productBorder::after {
		      content: "";
		      box-sizing: border-box;
		      position: absolute;
		      left: 0;
		      top: 0;
		      width: 200%;
		      height: 200%;
		      transform:scale(0.5,0.5);
		      transform-origin:0 0;
		      border: 1px solid #e1e2df;
		    }
}
</style>